<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <meta charset="UTF-8">
    <title>database-export</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../../../static/assetss/images/fav.png" th:href="@{/assetss/images/fav.png}">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../static/element-ui/element-ui.css" th:href="@{/element-ui/element-ui.css}">
    <link rel="stylesheet" href="../../../static/css/index2.css" th:href="@{/css/index2.css}">
    <script th:inline="javascript">
        /*<![CDATA[*/
        var ctx = [[@{/}]];
    </script>
    <!-- 引入组件库 -->
    <script src="../../../static/vue/vue.v2.6.10.js" th:src="@{/vue/vue.v2.6.10.js}"></script>
    <script src="../../../static/vue/axios.v0.19.0.min.js" th:src="@{/vue/axios.v0.19.0.min.js}"></script>
    <script src="../../../static/element-ui/element-ui.js" th:src="@{/element-ui/element-ui.js}"></script>
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="icon-img">
                <img v-bind:src="iconUrl">
            </div>
            <div class="icon-text">
                <h1 class="icon-title">{{iconTitle}}</h1>
                <h5 class="icon-notes">{{iconNotes}}</h5>
            </div>
        </div>
        <div class="body">
            <div class="body_side_bar">
                <div class="sql-kind-div" v-bind:style="welcomeBarStyle" @click="barClick('welcome')">
                    <img class="bar-icon" v-bind:src="welcomeIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="oracleBarStyle" @click="barClick('oracle')">
                    <img class="bar-icon" v-bind:src="oracleIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="mysqlBarStyle" @click="barClick('mysql')">
                    <img class="bar-icon" v-bind:src="mysqlIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="sqlServerBarStyle" @click="barClick('sqlserver')">
                    <img class="bar-icon" v-bind:src="sqlserverIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="postgresqlBarStyle" @click="barClick('postgresql')">
                    <img class="bar-icon" v-bind:src="postgresqlIconImg" />
                </div>
            </div>
            <div class="body_content" v-loading="loading" element-loading-text="拼命生成中...请勿刷新网页,如果表多,可能需要等待几分钟" element-loading-background="rgba(242,246,252, 0.8)">
                <div v-bind:style="contentStyle" v-show="welcomeDivShow">
                    <div style="padding-top: 2rem">
                        <span style="font-size: 25px">database-export是一款能生成数据库结构文档工具</span><br>
                        <br/>
                        <br/>
                        <span style="font-size: 20px">能支持最新的数据库版本，可以导出支持office2007版本以上的docx格式的文档</span>
                        <br/>
                        <span style="font-size: 20px">也可以导出excel，支持xlsx，也可以直接在浏览器预览</span>
                        <br/>
                        <br/>
                        <span style="font-size: 20px">如果有问题,可以去GitHub上提交issue，或微信联系我</span>
                        <br/>
                        <span style="font-size: 20px">想要进技术群加我微信，点击下面的微信图标加我</span>
                    </div>
                    <div style="padding-top: 10%">
                        <a title="Gitee" target="_blank" href="https://gitee.com/pomz/database-export" >
                            <img v-bind:src="giteeIconImg" style="width: 80px;height: 80px;margin-left: 30px;" />
                        </a>
                        <a title="GitHub" target="_blank" href="https://github.com/PomZWJ/database-export/" >
                            <img v-bind:src="githubIconImg" style="width: 80px;height: 80px;margin-left: 30px;" />
                        </a>
                        <a title="给我发邮件吧" target="_blank" href="mailto:1513041820@qq.com" style="display: none;">
                            <img v-bind:src="emailIconImg" style="width: 88px;height: 88px;margin-left: 30px;" />
                        </a>
                        <a title="微信">
                            <img v-bind:src="weChatIconImg" @click="openMyWxQr" style="width: 108px;height: 88px;margin-left: 30px;"  />
                        </a>
                    </div>
                    <div style="margin-top: 60px">
                        <span>Copyright © PomZWJ XiaMen 2018~2022</span>
                    </div>

                </div>
                <div v-bind:style="contentStyle" v-show="oracleDivShow" style="display: none;">
                    <el-image src="oracle-bg.png" th:src="@{/assetss/images/v2/oracle-bg.png}" :fit="fit" style="width: 190px;height:110px;"></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto;">
                            <el-popover placement="top" width="340" v-model="oraclePopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('oracle','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('oracle','excel')">excel</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('oracle','markdown')">markdown</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('oracle')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>

                <div v-bind:style="contentStyle" v-show="mysqlDivShow" style="display: none;">
                    <el-image src="mysql-bg.png" th:src="@{/assetss/images/v2/mysql-bg.png}" :fit="fit" style="width: 110px;height:110px;"></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto">
                            <el-popover placement="top" width="340" v-model="mysqlPopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('mysql','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('mysql','excel')">excel</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('mysql','markdown')">markdown</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('mysql')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>
                <div v-bind:style="contentStyle" v-show="sqlserverDivShow" style="display: none;">
                    <el-image src="sqlserver-bg.png" th:src="@{/assetss/images/v2/sqlserver-bg.png}" :fit="fit" style="width: 306.8px;height:80px;;padding-top: 30px" ></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto">
                            <el-popover placement="top" width="340" v-model="sqlserverPopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('sqlserver','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('sqlserver','excel')">excel</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('sqlserver','markdown')">markdown</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('sqlserver')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>
                <div v-bind:style="contentStyle" v-show="postgresqlDivShow" style="display: none;">
                    <el-image src="sqlserver-bg.png" th:src="@{/assetss/images/v2/postgresql-bg.png}" :fit="fit" style="width: 80px;height:80px;;padding-top: 30px" ></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-select style="display: block" size="large" v-model="dataBaseSelect" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto">
                            <el-popover placement="top" width="340" v-model="postgresqlPopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('','excel')">excel</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('','markdown')">markdown</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            options: [{
                value: 'postgresql',
                label: 'postgresql'
            }, {
                value: 'clickhouse',
                label: 'clickhouse'
            }, {
                value: 'sqlite',
                label: 'sqlite'
            }],
            dataBaseSelect: '',
            fit: 'fill',
            value: new Date(),
            loading: false,
            iconUrl: ctx+"assetss/images/fav.png",
            iconTitle: "database-export",
            iconNotes: "数据库表结构导出工具V3.4.0",
            o_ip: '',
            o_port: "1521",
            o_dataname: "orcl",
            o_username: "",
            o_password: "",
            o_filepath: "D://",
            m_ip: '',
            m_port: "3306",
            m_dataname: "",
            m_username: "",
            m_password: "",
            m_filepath: "D://",
            s_ip: '',
            s_port: "1433",
            s_dataname: "",
            s_username: "",
            s_password: "",
            s_filepath: "D://",
            postgresql_ip: '',
            postgresql_port: "",
            postgresql_dataname: "",
            postgresql_username: "",
            postgresql_password: "",
            welcomeDivShow: true,
            oracleDivShow: false,
            mysqlDivShow: false,
            sqlserverDivShow: false,
            postgresqlDivShow: false,
            oraclePopoverVisible: false,
            mysqlPopoverVisible: false,
            sqlserverPopoverVisible: false,
            postgresqlPopoverVisible: false,
            welcomeIconImg: ctx+"/assetss/images/v2/welcome-icon-click.png",
            oracleIconImg: ctx+"/assetss/images/v2/oracle-icon-unclick.png",
            mysqlIconImg: ctx+"/assetss/images/v2/mysql-icon-unclick.png",
            sqlserverIconImg: ctx+"/assetss/images/v2/sqlserver-icon-unclick.png",
            postgresqlIconImg: ctx+"/assetss/images/v2/postgresql-icon-unclick.png",
            clickhouseIconImg: ctx+"/assetss/images/v2/clickhouse-icon-unclick.png",
            githubIconImg: ctx+"/assetss/images/v2/GitHub-icon.png",
            giteeIconImg: ctx+"/assetss/images/v2/Gitee-icon.png",
            emailIconImg: ctx+"/assetss/images/v2/email-icon.png",
            weChatIconImg: ctx+"/assetss/images/v2/wechat-icon.png",
            welcomeBarStyle: {
                borderBottom: "1px solid rgb(235, 233, 233)",
                background: "#F2F6FC"
            },
            oracleBarStyle: {
                borderBottom: "1px solid rgb(235, 233, 233)",
                background: "rgb(255,255,255)"
            },
            mysqlBarStyle: {
                borderRight: "1px solid rgb(235, 233, 233)",
                background: "rgb(255,255,255)"
            },
            sqlServerBarStyle: {
                borderTop: "1px solid rgb(235, 233, 233)",
                background: "rgb(255,255,255)"
            },
            postgresqlBarStyle: {
                borderTop: "1px solid rgb(235, 233, 233)",
                background: "rgb(255,255,255)"
            },
            clickhouseBarStyle: {
                borderTop: "1px solid rgb(235, 233, 233)",
                background: "rgb(255,255,255)"
            },
            contentStyle: {
                background: "#F2F6FC",
                width: "100%",
                height: "100%"
            }
        },
        watch: {
            dataBaseSelect(val){
                if(val && val == 'sqlite'){
                    this.$alert('sqlite在IP地址输入数据库文件地址即可，其他参数随便填', '提示', {
                        confirmButtonText: '确定'
                    });
                }
            }
        },
        methods: {
            generateWord(sqlKind,exportFileType) {
                if(!sqlKind){
                    if(!this.dataBaseSelect){
                        this.$message.error('请选择数据库类型');
                        return;
                    }
                    sqlKind = this.dataBaseSelect;
                }
                let ip;
                let port;
                let dataname;
                let username;
                let password;
                if(exportFileType==undefined || exportFileType == ''){
                    this.$message.error('导出文件类型不能为空');
                    return;
                }
                if (sqlKind == 'oracle') {
                    this.oraclePopoverVisible = false;
                    ip = this.o_ip;
                    port = this.o_port;
                    dataname = this.o_dataname;
                    username = this.o_username;
                    password = this.o_password;
                } else if (sqlKind == 'mysql') {
                    this.mysqlPopoverVisible = false;
                    ip = this.m_ip;
                    port = this.m_port;
                    dataname = this.m_dataname;
                    username = this.m_username;
                    password = this.m_password;
                } else if (sqlKind == 'sqlserver') {
                    this.sqlserverPopoverVisible = false;
                    ip = this.s_ip;
                    port = this.s_port;
                    dataname = this.s_dataname;
                    username = this.s_username;
                    password = this.s_password;
                }else{
                    this.postgresqlPopoverVisible = false;
                    ip = this.postgresql_ip;
                    port = this.postgresql_port;
                    dataname = this.postgresql_dataname;
                    username = this.postgresql_username;
                    password = this.postgresql_password;
                }

                if (ip == '') {
                    this.$message.error('IP不能为空');
                    return;
                }
                if (port == '') {
                    this.$message.error('端口不能为空');
                    return;
                }
                if (dataname == '') {
                    this.$message.error('实例/数据库名称不能为空');
                    return;
                }
                if (username == '') {
                    this.$message.error('用户名不能为空');
                    return;
                }
                /*if (password == '') {
                    this.$message.error('密码不能为空');
                    return;
                }*/
                let params = {"dbKind":sqlKind,"ip":ip,"port":port,"dbName":dataname,"userName":username,"password":password,"exportFileType":exportFileType};
                if(exportFileType == 'excel'){
                    window.open("/dbExport/v2/makeExcel?base64Params="+btoa(JSON.stringify(params)));
                }else if(exportFileType == 'word'){
                    window.open("/dbExport/v2/makeWord?base64Params="+btoa(JSON.stringify(params)));
                }else if(exportFileType == 'markdown'){
                    window.open("/dbExport/v2/makeMarkdown?base64Params="+btoa(JSON.stringify(params)));
                }

            },
            barClick(sqlKind) {
                if (sqlKind == 'welcome') {
                    this.welcomeDivShow = true;
                    this.oracleDivShow = false;
                    this.mysqlDivShow = false;
                    this.sqlserverDivShow = false;
                    this.postgresqlDivShow = false;
                    this.welcomeBarStyle.background = "#F2F6FC";
                    this.mysqlBarStyle.background = "rgb(255,255,255)";
                    this.sqlServerBarStyle.background = "rgb(255,255,255)";
                    this.oracleBarStyle.background = "rgb(255,255,255)";
                    this.postgresqlBarStyle.background = "rgb(255,255,255)";
                    //图片
                    this.welcomeIconImg = ctx+"/assetss/images/v2/welcome-icon-click.png";
                    this.oracleIconImg = ctx+"/assetss/images/v2/oracle-icon-unclick.png";
                    this.mysqlIconImg = ctx+"/assetss/images/v2/mysql-icon-unclick.png";
                    this.sqlserverIconImg = ctx+"/assetss/images/v2/sqlserver-icon-unclick.png";
                    this.postgresqlIconImg = ctx+"/assetss/images/v2/postgresql-icon-unclick.png";
                } else if (sqlKind == 'oracle') {
                    this.welcomeDivShow = false;
                    this.oracleDivShow = true;
                    this.mysqlDivShow = false;
                    this.sqlserverDivShow = false;
                    this.postgresqlDivShow = false;
                    this.welcomeBarStyle.background = "rgb(255,255,255)";
                    this.mysqlBarStyle.background = "rgb(255,255,255)";
                    this.sqlServerBarStyle.background = "rgb(255,255,255)";
                    this.oracleBarStyle.background = "#F2F6FC";
                    this.postgresqlBarStyle.background = "rgb(255,255,255)";
                    //图片
                    this.welcomeIconImg = ctx+"/assetss/images/v2/welcome-icon-unclick.png";
                    this.oracleIconImg = ctx+"/assetss/images/v2/oracle-icon-click.png";
                    this.mysqlIconImg = ctx+"/assetss/images/v2/mysql-icon-unclick.png";
                    this.sqlserverIconImg = ctx+"/assetss/images/v2/sqlserver-icon-unclick.png";
                    this.postgresqlIconImg = ctx+"/assetss/images/v2/postgresql-icon-unclick.png";
                } else if (sqlKind == 'mysql') {
                    this.postgresqlDivShow = false;
                    this.welcomeDivShow = false;
                    this.oracleDivShow = false;
                    this.mysqlDivShow = true;
                    this.sqlserverDivShow = false;
                    this.mysqlBarStyle.background = "#F2F6FC";
                    this.welcomeBarStyle.background = "rgb(255,255,255)";
                    this.sqlServerBarStyle.background = "rgb(255,255,255)";
                    this.oracleBarStyle.background = "rgb(255,255,255)";
                    this.postgresqlBarStyle.background = "rgb(255,255,255)";
                    //图片
                    this.welcomeIconImg = ctx+"/assetss/images/v2/welcome-icon-unclick.png";
                    this.oracleIconImg = ctx+"/assetss/images/v2/oracle-icon-unclick.png";
                    this.mysqlIconImg = ctx+"/assetss/images/v2/mysql-icon-click.png";
                    this.sqlserverIconImg = ctx+"/assetss/images/v2/sqlserver-icon-unclick.png";
                    this.postgresqlIconImg = ctx+"/assetss/images/v2/postgresql-icon-unclick.png";
                } else if (sqlKind == 'sqlserver') {
                    this.welcomeDivShow = false;
                    this.oracleDivShow = false;
                    this.mysqlDivShow = false;
                    this.sqlserverDivShow = true;
                    this.postgresqlDivShow = false;
                    this.welcomeBarStyle.background = "rgb(255,255,255)";
                    this.mysqlBarStyle.background = "rgb(255,255,255)";
                    this.oracleBarStyle.background = "rgb(255,255,255)";
                    this.sqlServerBarStyle.background = "#F2F6FC";
                    this.postgresqlBarStyle.background = "rgb(255,255,255)";
                    //图片
                    this.welcomeIconImg = ctx+"/assetss/images/v2/welcome-icon-unclick.png";
                    this.oracleIconImg = ctx+"/assetss/images/v2/oracle-icon-unclick.png";
                    this.mysqlIconImg = ctx+"/assetss/images/v2/mysql-icon-unclick.png";
                    this.sqlserverIconImg = ctx+"/assetss/images/v2/sqlserver-icon-click.png";
                    this.postgresqlIconImg = ctx+"/assetss/images/v2/postgresql-icon-unclick.png";

                }else if (sqlKind == 'postgresql') {
                    this.welcomeDivShow = false;
                    this.oracleDivShow = false;
                    this.mysqlDivShow = false;
                    this.sqlserverDivShow = false;
                    this.postgresqlDivShow = true;
                    this.welcomeBarStyle.background = "rgb(255,255,255)";
                    this.mysqlBarStyle.background = "rgb(255,255,255)";
                    this.oracleBarStyle.background = "rgb(255,255,255)";
                    this.postgresqlBarStyle.background = "#F2F6FC";
                    this.sqlServerBarStyle.background = "rgb(255,255,255)";
                    //图片
                    this.welcomeIconImg = ctx+"/assetss/images/v2/welcome-icon-unclick.png";
                    this.oracleIconImg = ctx+"/assetss/images/v2/oracle-icon-unclick.png";
                    this.mysqlIconImg = ctx+"/assetss/images/v2/mysql-icon-unclick.png";
                    this.sqlserverIconImg = ctx+"/assetss/images/v2/sqlserver-icon-unclick.png";
                    this.postgresqlIconImg = ctx+"/assetss/images/v2/postgresql-icon-click.png";

                }
                this.contentStyle.background = "#F2F6FC";

            },
            openMyWxQr(){
                let html = "<img style='width:300px;height: 300px;' src='"+ctx+"/assetss/images/v2/mywxqr.png'"+"/>";
                this.$alert(html, '扫一扫加我微信进技术群', {
                    dangerouslyUseHTMLString: true,
                    center: true,
                    type: "success"
                });
            },
            generateDocHtml(sqlKind) {
                if(!sqlKind){
                    if(!this.dataBaseSelect){
                        this.$message.error('请选择数据库类型');
                        return;
                    }
                    sqlKind = this.dataBaseSelect;
                }
                let ip;
                let port;
                let dataname;
                let username;
                let password;
                if (sqlKind == 'oracle') {
                    ip = this.o_ip;
                    port = this.o_port;
                    dataname = this.o_dataname;
                    username = this.o_username;
                    password = this.o_password;
                    //filepath = this.o_filepath;
                } else if (sqlKind == 'mysql') {
                    ip = this.m_ip;
                    port = this.m_port;
                    dataname = this.m_dataname;
                    username = this.m_username;
                    password = this.m_password;
                } else if (sqlKind == 'sqlserver') {
                    ip = this.s_ip;
                    port = this.s_port;
                    dataname = this.s_dataname;
                    username = this.s_username;
                    password = this.s_password;
                }else{
                    ip = this.postgresql_ip;
                    port = this.postgresql_port;
                    dataname = this.postgresql_dataname;
                    username = this.postgresql_username;
                    password = this.postgresql_password;
                }

                if (ip == '') {
                    this.$message.error('IP不能为空');
                    return;
                }
                if (port == '') {
                    this.$message.error('端口不能为空');
                    return;
                }
                if (dataname == '') {
                    this.$message.error('实例/数据库名称不能为空');
                    return;
                }
                if (username == '') {
                    this.$message.error('用户名不能为空');
                    return;
                }
                /*if (password == '') {
                    this.$message.error('密码不能为空');
                    return;
                }*/
                let params = {"dbKind":sqlKind,"ip":ip,"port":port,"dbName":dataname,"userName":username,"password":password};
                window.open("/dbExport/v2/viewDocHtml?base64Params="+btoa(JSON.stringify(params)));
            }
        }
    });
</script>
</html>